<template>
  <div class="flex w-100% h-100%">
    <ContentWrap title="日历" class="w-400px">
      <el-calendar v-model="calendarVal">
        <template #date-cell="{ data }">
          <div @click="viewDayWork(data)">
            <p>
              {{ data.day.split('-').slice(2).join() }}
            </p>
          </div>
        </template>
      </el-calendar>
    </ContentWrap>
    <div title="日报管理" class="flex-[3] ml-20px">
      <el-date-picker
        v-model="logFormData.day"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="Pick a day"
        class="mr-10px mb-10px mt-10px"
      />
      <el-radio-group v-model="logFormData.type" size="default" class="">
        <el-radio-button :value="1">日报</el-radio-button>
        <el-radio-button :value="2">周报</el-radio-button>
        <el-radio-button :value="3">月报</el-radio-button>
      </el-radio-group>
      <el-button type="success" @click="saveLog" class="ml-10px mt-10px">{{
        opTypeTitle
      }}</el-button>
      <Editor
        v-model="logFormData.content"
        class="mb-10px mt-10px"
        ref="editorRef"
        height="300px"
        @change="change"
      />
      <div v-for="(item, index) in lastLogs" :key="`dynamics-${index}`">
        <div class="flex items-center">
          <div>
            <div class="text-14px">
              <span class="logDateTitle">{{ item.day }}</span>
              <span class="logDateTitle ml-10px">{{ formattedDayOfWeek(item.day) }}</span>
              <el-tag v-if="item.type == 1" type="primary" class="ml-20px" round>日报</el-tag>
              <el-tag v-if="item.type == 2" type="success" class="ml-20px" round>周报</el-tag>
              <el-tag v-if="item.type == 3" type="info" class="ml-20px" round>月报</el-tag>
              <el-button type="primary" class="ml-20px" size="small" @click="editLogInfo(item)"
                >编辑</el-button
              >
            </div>
            <div class="mt-15px">
              <div v-html="item.content"></div>
            </div>
          </div>
        </div>
        <ElDivider />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { reactive, ref } from 'vue'
import {
  ElButton,
  ElMessage,
  ElCalendar,
  ElDatePicker,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElDivider,
  ElTag
} from 'element-plus'
import { Editor, EditorExpose } from '@/components/Editor'
import { IDomEditor } from '@wangeditor/editor'
import { getLogListApi, saveLogApi, getLogByDay } from '@/api/log'
import { LogFormData, LogListReq } from '@/api/log/types'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

const calendarVal = ref(new Date())
const opTypeTitle = ref('新增')
const editorRef = ref<typeof Editor & EditorExpose>()
const logFormData = reactive<LogFormData>({
  id: null,
  type: 1,
  day: '2024-09-01',
  content: ''
})
let lastLogs = ref<[]>([])

logFormData.day = dayjs().format('YYYY-MM-DD')

// 获取最近日志
const getLastLogs = async () => {
  const res = await getLogListApi({ endDate: logFormData.day, pageNo: 1, pageSize: 5 })
  if (res) {
    // lastLogs = Object.assign(lastLogs, res.data.items)
    lastLogs.value = res.data.items
    // lastLogs = ref<[]>(res.data.items)
  }
  console.log(lastLogs)
}
getLastLogs()

const formattedDayOfWeek = (date) => {
  return dayjs(date).format('dddd') // 使用 dayjs 格式化日期
}

const saveLog = async () => {
  try {
    console.log(logFormData)
    await saveLogApi(logFormData)
    ElMessage.success('操作成功')
    // 刷新列表
    await getLastLogs()
  } catch (error) {
    console.error(error)
  }
}

const editLogInfo = async (row) => {
  console.log('editLogInfo', row)
  opTypeTitle.value = '修改'
  logFormData.id = row.id
  logFormData.type = row.type
  logFormData.day = row.day
  logFormData.content = row.content
}

const viewDayWork = async (data: any) => {
  console.log(data)
  logFormData.day = data.day
  // 默认展示日报内容
  const res = await getLogByDay({ day: logFormData.day, type: 1 })
  console.log(res)
  if (res.data) {
    opTypeTitle.value = '修改'
    logFormData.id = res.data.id
    logFormData.type = res.data.type
    logFormData.content = res.data.content
  } else {
    opTypeTitle.value = '新增'
    logFormData.id = null
    logFormData.type = 1
    logFormData.content = ''
  }
  // 刷新列表
  await getLastLogs()
}
const change = (editor: IDomEditor) => {
  // console.log(editor.getHtml())
}
</script>

<style lang="less" scoped>
.calendar {
  height: 400px;
}
.is-selected {
  color: #1989fa;
}
.logDateTitle {
  font-size: 22px;
  font-weight: 700;
}
/deep/ .el-calendar {
  font-size: 14px;
  .next {
    border: none;
  }
  td {
    border: none;
  }
  .el-calendar-day {
    height: 35px !important;
    text-align: center;
    border: none;
  }
  .el-calendar__header {
    justify-content: space-between;
  }
  .is-selected {
    background-color: #1d8dd8;
    color: #fff;
  }
}
</style>
